<template>
  <div>
    <Modal
      v-model="visible"
      :mask-closable="false"
      width="600px"
      :title="title"
    >
      <Form :model="form" ref="jobForm" :rules="rules" :label-width="100">
        <FormItem label="岗位名称"  prop="jobName">
          <Input v-model="form.jobName" placeholder="请输入岗位名称" />
        </FormItem>
        <FormItem label="部门" :error="errorMsg">
          <dept-tree-select ref="deptTree" @on-change="changeDept"></dept-tree-select>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <InputNumber style="width: 60%" :min="1" v-model="form.sort"></InputNumber>
        </FormItem>
        <FormItem label="岗位简介" prop="roleDesc">
          <Input type="textarea" v-model="form.remark" :rows="4" placeholder="请输入岗位简介" />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" style="margin-right: 8px" :loading="submitLoading" @click="submitForm">{{$t("submit")}}</Button>
        <Button  @click="close">{{$t("close")}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import DeptTreeSelect from '@/components/base/dept-tree-select'
import {saveJob, updateJob} from "@/api/job";
export default {
  name: "JobForm",
  components:{
    DeptTreeSelect
  },
  data(){
    return{
      visible:false,
      title:'',
      form:{
        sort:1,
        jobName: '',
      },
      submitLoading:false,
      rules:{
        jobName:[
          {required:true,message:'请输入岗位名称',trigger:'blur'}
        ],
        deptId:[
          {required:true,message:'请选择部门',trigger:'blur'}
        ]
      },
      modalType:1,
      errorMsg:'',
    }
  },
  methods:{
    add(){
      this.edit({})
    },
    edit(record){
      if(Object.keys(record).length!=0){
        this.form.jobId=record.jobId;
        this.form.jobName=record.jobName;
        this.form.deptId=record.deptId;
        this.form.sort=record.sort;
        this.form.remark=record.remark;
        this.$refs.deptTree.setData(record.deptId,record.deptName)
      }
      this.visible=true;
    },
    close(){
      this.visible=false;
      this.form={
        sort:1
      };
      this.$refs.deptTree.setData('','')
    },
    submitForm(){
      if(this.form.deptId==null||this.form.deptId==''){
        this.errorMsg='请选择部门';
        return ;
      }else{
        this.errorMsg=''
      }
      this.$refs['jobForm'].validate((valid)=>{
        if(valid){
          this.submitLoading=true;
          let obj;
          if(this.modalType==1){
            obj=saveJob(this.form);
          }else{
            obj=updateJob(this.form);
          }
          obj.then(res=>{
            if(res.code===200){
               this.submitLoading=false;
               this.$Message.success('操作成功');
               this.$emit('ok');
               this.close();
            }
            this.submitLoading=false;
          })
        }
      })
    },
    changeDept(v){
      this.form.deptId=v[0];
    }
  }
}
</script>

<style scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
